<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item>服务列表</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 列表 -->
            <div class="userlist">
              <div class="status_box">
                <el-select v-model="userType" placeholder="全部发帖" @change="selectChanged()" class="selectBox">
                  <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="parentClassifyId" placeholder="全部信息" @change="selectChanged1()" class="selectBox">
                  <el-option v-for="(item,index) in options2" :key="index" :label="item.cname" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="status" placeholder="全部状态" @change="selectChanged2()" class="selectBox">
                  <el-option v-for="(item,index) in options3" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <div class="search search1"><el-input v-model="key" placeholder="输入关键字" clearable></el-input></div>
                <div class="search" @click="selectChanged3()"><el-button>搜索</el-button></div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="userId" label="用户ID" width="80"></el-table-column>
                  <el-table-column prop="parentClassify" label="类型" width="100"></el-table-column>
                  <el-table-column prop="title" label="标题"></el-table-column>
                  <el-table-column prop="introduce" label="类容"></el-table-column>
                  <el-table-column label="图片" align="center" width="265px">
                      <template slot-scope="scope">
                          <span v-for="(item,index) in scope.row.pics" :key="index">
                              <el-popover placement="left" trigger="click" width="300">
                                  <img :src="item" width="100%" />
                                  <img
                                      slot="reference"
                                      :src="item"
                                      :alt="item"
                                      style="max-height: 70px;max-width: 70px; padding: 5px"
                                  />
                              </el-popover>
                          </span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="contacts" label="联系人" width="120"></el-table-column>
                  <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
                  <el-table-column prop="aspect" label="供需关系" width="100">
                    <template slot-scope="scope">
                      <span v-if="scope.row.userType== 1">供方</span>
                      <span v-if="scope.row.userType== 2">需方</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
                  <el-table-column prop="prescription" label="有效时间" width="100">
                    <template slot-scope="scope">
                      <span>{{scope.row.prescription}}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="enable" label="审核状态" align="center" width="100">
                    <template slot-scope="scope">
                      <span v-if="scope.row.releaseStatus== 1" >审核中</span>
                      <span v-if="scope.row.releaseStatus== 2" class="userStatus1">已通过</span>
                      <span v-if="scope.row.releaseStatus== 3" >拒绝</span>
                      <span v-if="scope.row.releaseStatus== 4" >管理员删除</span>
                      <span v-if="scope.row.releaseStatus== 5" class="userStatus2">用户删除</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right"  width="120">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" v-if="scope.row.releaseStatus== 1" @click="pass(scope.row)">通过</el-button>
                      <el-button type="text" size="small" v-if="scope.row.releaseStatus== 1" @click="refuse(scope.row)">拒绝</el-button>
                      <el-button type="text" size="small" v-if="scope.row.releaseStatus== 2" @click="turnDown(scope.row)">待审核</el-button>
                      <el-button type="text" size="small" v-if="scope.row.releaseStatus== 3" @click="turnDown(scope.row)">待审核</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10,20,30,40,50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'ServiceList',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        tableData: [],// 表格
        multipleSelection: [], // 选择后的列表
        options: [{//供需方状态
          value: '',
          label: '全部发帖',
        },{
          value: '1',
          label: '供方',
        },{
          value: '2',
          label: '需方',
        }],
        userType:'',//供需方值
        options1: [{//一级分类信息
          id: '',
          cname: '全部信息',
        }],
        options2: [],
        parentClassifyId:'',//一级分类id
        status:'',//审核状态
        options3: [{//审核状态
          value: '',
          label: '全部状态',
        },{
          value: '1',
          label: '审核中',
        },{
          value: '2',
          label: '已通过',
        },{
          value: '3',
          label: '已拒绝',
        },{
          value: '4',
          label: '管理删除',
        },{
          value: '5',
          label: '用户删除',
        }],
        key:'',//关键字
      }
    },
    mounted() {
      this.findList();
      this.getAllClass();
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      // 获取所有服务列表
      findList(){
        this.$axios.post(this.baseURL1+'admin/informationPost/serviceList',{
          "page":this.page,
          "size":this.pageSize,
          "userType":this.userType,//供需关系
          "parentClassifyId":this.parentClassifyId,//一级分类id
          "releaseStatus":this.status,//审核状态
          "key":this.key,//关键字
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"所有服务列表");
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
            for(var i=0;i<res.data.data.records.length;i++){
              this.tableData[i].pics = res.data.data.records[i].pic.split(',')
            }
            console.log("服务详情", this.tableData)
            //
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findList();
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findList();
      },
      // 通过审核
      pass(row){
        this.$confirm('确认通过该服务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/informationPost/pass',{
            "informationPostId":row.informationPostId,
            "requestSource":"PC"
          }).then((res)=>{
            console.log(res,"通过服务");
            if(res.data.code==1){
              this.findList()
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      // 拒绝审核
      refuse(row){
        this.$confirm('确认拒绝该服务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/informationPost/noPass',{
            "informationPostId":row.informationPostId,
            "requestSource":"PC"
          }).then((res)=>{
            console.log(res,"拒绝服务");
            if(res.data.code==1){
              this.findList()
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      // 已审核已拒绝的服务驳回为待审核
      turnDown(row){
        console.log(row.informationPostId)
        this.$confirm('确认驳回该服务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/informationPost/reject',{
            "informationPostId":row.informationPostId,
            "requestSource":"PC"
          }).then((res)=>{
            console.log(res,"驳回服务");
            if(res.data.code==1){
              this.findList()
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      // 根据供需关系查找
      selectChanged(){
        console.log("供需："+this.userType);
        this.findList();
        this.getAllClass()
      },
      //获取一级分类全部
      getAllClass(){
        this.$axios.post(this.baseURL1+'admin/goodsClassify/getAppGoodsClassifyList',{
          "parentId":0,//父级服务类目
          "aspect":this.userType,//供需方
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"所有服务类目");
          if(res.data.code==1){
            this.options2 =this.options1.concat(res.data.data.records);
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 根据一级分类查找
      selectChanged1(){
        console.log("一级分类信息："+this.parentClassifyId);
        this.findList();
      },
      // 根据审核状态查找
      selectChanged2(){
        console.log("审核状态："+this.status);
        this.findList();
      },
      // 根据关键字查找
      selectChanged3(){
        console.log("关键字："+this.key);
        this.findList();
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userStatus1{
    color: #19be6b;
  }
  .userStatus2{
    color: red;
  }
  >>> .el-input__inner{
    height: 35px;
    line-height: 35px;
    margin-top: 7px;
  }
  >>> .el-select{
    margin-right: 10px;
  }
  .search1{
    width: 200px!important;
    margin-top: 0px!important;
    margin-left: 0!important;
  }
  >>>  .el-input__suffix{
    line-height: 35px!important;
    margin-top: 4px!important;
  }
</style>
